<template>
	<view class="cus-page">
		<view class="left">
            <view class="item" v-for="(item,index) in leftList" :key="index" @tap="goGoodsDetail(1)">
			    <image :src="item.src" alt="" mode="widthFix"></image>
                <view class="text">
                    <text class="u-line-2">这里是描述文本这里是描述文本这里是描述文本这里是描述文本这里是描述文本这里是描</text>
                </view>
            </view>
		</view>
		<view class="right">
            <view class="item" v-for="(item,index) in rightList" :key="index" @tap="goGoodsDetail(2)">
			    <image :src="item.src" alt="" mode="widthFix"></image>
                <view class="text">
                    <text class="u-line-2">这里是描述文本这里是描述文本这里是描述文本这里是描述文本这里是描述文本这里是描</text>
                </view>
            </view>
		</view>
	</view>
</template>


<script>
export default {
    name:'waterfallFlow',
    props:{},
    components: {},
    data () {
        return {
            list: [
                { src: "/static/temporary/img1.jpg", text: "" },
                { src: "/static/temporary/img2.jpg", text: "" },
                { src: "/static/temporary/img3.jpg", text: "" },
                { src: "/static/temporary/img1.jpg", text: "" },
                { src: "/static/temporary/img2.jpg", text: "" },
                { src: "/static/temporary/img3.jpg", text: "" },
      
            ],
            // 初始化左右盒子
            leftList: [],
            rightList: [],
            // 初始化左右盒子高度
            leftH: 0,
            rightH: 0
        }
    },

    computed: {},
    watch: {},

    mounted() {
        this.doList();
    },

    methods: {
        doList() {
            this.list.forEach(res => {
                // 获取图片宽高
                uni.getImageInfo({
                    src: res.src,
                    success: (image) => {
                        // 计算图片渲染高度
                        let showH = (50 * image.height) / image.width;
                        // 判断左右盒子高度
                        if(this.leftH <= this.rightH) {
                            this.leftList.push(res);
                            this.leftH += showH;
                        } else {
                            this.rightList.push(res);
                            this.rightH += showH;
                        }
                    }
                })
            })
        },

        // 去商品详情
        goGoodsDetail(type){
            if(type==1){
                uni.navigateTo({url:"/pages/home/detail"})
            }else{
                uni.navigateTo({url:"/pages/home/goods-detail"})
            }
        }
    },
}
</script>


<style scoped lang='scss'>
	.right,.left{
        display: inline-block; 
        width: 48%;
        vertical-align: top;
    }
	.left{
        margin-right: 4%;
    }
	.left image,.right image{
        width: 100%;
        max-height: 360rpx;
    }

    .item{
        margin-bottom: 32rpx;
        border-radius: 24rpx;
        overflow: hidden;
        .text{
            padding: 24rpx 20rpx 32rpx;
            background: #fff;
            line-height: 40rpx;
        }
        &:nth-last-child(1){
            margin-bottom: 0;
        }
    }
</style>